<script setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import chinaGEOJson from "./china.json";

const mapName = "chinaMap";
// 注册中国地图
echarts.registerMap(mapName, chinaGEOJson);

defineOptions({ name: "Demo01.vue" });

const echartsDomRef = ref();

function initComp(echartsDom) {
  const myChart = echarts.init(echartsDom);
  var option = {
    tooltip: {},
    geo:{
      map: mapName,
      emphasis:{
        label:{
          show:false
        }
      }
    },
    series: [
      {
        type: "effectScatter", //  指明图表类型：带涟漪效果的散点图
        coordinateSystem: "geo", //  指明绘制在geo坐标系上
        data: [
          {
            name: "上海",
            value: [121.47, 31.23, 55],
          },
          {
            name: "北京",
            value: [116.4, 39.9, 110],
          },
          {
            name: "重庆",
            value: [106.55, 29.56, 32], // value的前两项是经纬度坐标，第三项为污染度数据
          },
        ],
      },
    ],
  };
  myChart.setOption(option);
}
onMounted(() => {
  const echartsDom = echartsDomRef.value;
  if (echartsDom) {
    initComp(echartsDom);
  }
});
</script>

<template>
  <div ref="echartsDomRef" style="height: 500px"></div>
</template>

<style lang="scss" scoped></style>
